<script>
const img1 = require('../assets/1.png');
export default {
  data () {
    return {
      images: [
        { url: require('../assets/1.png'), },
        { url: require('../assets/2.png'), },
        { url: require('../assets/3.png'), },
        { url: require('../assets/4.png'), },
        { url: require('../assets/1.png'), },
        { url: require('../assets/2.png'), },
        { url: require('../assets/3.png'), },
      ]
    }
  },
  methods:{
    imageView(img1){
      this.$zoom(img1, {
        allowZoom:          true,  // When false, zooming is not available. Image will be shown on 100% size.
        autoScale:          true,  // When true, if the image is larger than the screen, it will be automatically scaled down until suitable. Along with 'allowZoom'
        closeOnClickModal:  false, // When false, clicking modal layer will close the viewer.
      });
    }
  },
  mounted () {

  }
}
</script>

<template>
  <div class="sf">
    <img v-for="(item,index) in images" :key="index" :src="item.url" width="100" @click="imageView(item.url)">
  </div>
</template>

<style scoped lang="scss">

</style>
